<template>
  <a-tabs size="small" class="mpd-side-panel-base-config height-full" :tabBarGutter="0">
    <a-tab-pane key="General" tab="常规" class="height-full">
      <general-config :actionItem="actionItem"></general-config>
    </a-tab-pane>
    <a-tab-pane key="style" tab="外观" class="height-full">
      <style-config :actionItem="actionItem"></style-config>
    </a-tab-pane>
    <a-tab-pane v-for="(item1, index1) in actionItem.base.tabs" :key="index1" :tab="item1.name" class="height-full">
      <scroll-container>
        <div class="margin-b-xs" v-for="(item2, index2) in item1.children" :key="index2">
          <component-config :item="item2" :actionItem="actionItem"></component-config>
        </div>
      </scroll-container>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import ComponentConfig from '../components/ComponentConfig.vue'
import GeneralConfig from './GeneralConfig.vue'
import StyleConfig from './StyleConfig.vue'

export default {
  name: 'PanelBaseConfig',
  components: {
    ComponentConfig,
    GeneralConfig,
    StyleConfig
  },
  props: {
    actionItem: {
      type: Object,
      required: true
    }
  },
  inject: ['selectPageNodeDom']
}
</script>

<style lang="less">
.mpd-side-panel-base-config {
  .ant-tabs-bar {
    margin: 0;
  }
  .ant-tabs-content {
    height: calc(100% - 40px);
  }
}
</style>
